<template>
  <div id='home'>
    <div class='homeindex'>
      <div class='top'>
        <div class='top-left'>
          <div
            class='top-left-top'>
            <v-titles>
              <div
                class='img'>
                <div
                  class='imginfo'>
                </div>
              </div>
              <div
                class='info'>
                <div
                  class='infobox'>
                  <h2>某某某公司
                  </h2>
                  <h4>
                    公司负责东南亚市场，分管各种商品交易
                  </h4>
                </div>
              </div>
            </v-titles>
          </div>
          <div
            class='top-left-bottom'>
            <v-message>
              <span
                class='el-icon-document-checked'></span>
              <span>待办信息</span>
              <div
                class='infobox'>
                <div
                  class='infobox-left'>
                  <div
                    class='infobox-left-title'>
                    用户角色管理
                  </div>
                  <div
                    class='infobox-left-info'>
                    <div
                      class='info-left'>
                      <h3>
                        {{usernum}}
                      </h3>
                      <h4>用户数量
                      </h4>
                    </div>
                    <div
                      class='info-right'>
                      <h3>
                        {{rolnum}}
                      </h3>
                      <h4>角色数量
                      </h4>
                    </div>
                  </div>
                </div>
                <div
                  class='infobox-right'>
                  <div
                    class='infobox-right-title'>
                    商品管理
                  </div>
                  <div
                    class='infobox-right-info'>
                    <div
                      class='info-left'>
                      <h3>
                        {{shopnum}}
                      </h3>
                      <h4>商品数量
                      </h4>
                    </div>
                    <div
                      class='info-right'>
                      <h3>
                        {{typenum}}
                      </h3>
                      <h4>
                        商品种类数量
                      </h4>
                    </div>
                  </div>
                </div>
              </div>
            </v-message>
          </div>
        </div>
        <div
          class='top-right'>
          <v-message>
            <span
              class='el-icon-chat-round'></span>
            <span>消息/通知</span>
            <ul class='list'>
              <li>成交通知</li>
              <li>用户注册通知</li>
              <li>产品下架通知</li>
            </ul>
          </v-message>
        </div>
      </div>
      <div class='bottom'>
        <div
          class='bottom-left'>
          <v-echarsleft>
            <span
              class='el-icon-coin'></span>
            <span>订单统计列表</span>
            <div
              class="block">
              <el-date-picker
                v-model="datevalue"
                type="daterange"
                size='mini'
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </v-echarsleft>
        </div>
        <div
          class='bottom-mid'>
          <v-echarsright>
            <span
              class='el-icon-coin'></span>
            <span>订单统计列表</span>
            <div
              class='type-mid'>
              <h4>数据类型：</h4>
              <el-select
                v-model="typevalue"
                clearable
                size='mini'
                placeholder="请选择">
                <el-option
                  v-for="item in type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>

          </v-echarsright>
        </div>
        <div
          class='bottom-right'>
          <div
            class='bottom-right-top'>
            <v-message>
              <span
                class='el-icon-set-up'></span>
              <span>系统公告</span>
              <ul
                class='list'>
                <li>机构调整公告
                </li>
                <li>系统升级公告
                </li>
                <li>日志更新公告
                </li>
              </ul>
            </v-message>
          </div>
          <div
            class='bottom-right-bottom'>
            <v-message>
              <span
                class='el-icon-cpu'></span>
              <span>系统帮助</span>
              <ul
                class='list'>
                <li>帮助手册v3.0
                </li>
                <li>帮助手册v2.0
                </li>
                <li>帮助手册v1.0
                </li>
              </ul>
            </v-message>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'home',
  components: {
    'v-titles': () => import('@/components/homes/title'),
    'v-message': () => import('@/components/homes/message'),
    'v-echarsright': () => import('@/components/homes/echarsright'),
    'v-echarsleft': () => import('@/components/homes/echarsleft'),
  },
  data() {
    return {
      usernum: '',
      rolnum: '',
      shopnum: '',
      typenum: '',
      type: [
        {
          value: '选项1',
          label: '无',
        },
      ],
      typevalue: '',
      datevalue: '',
    }
  },
  created() {
    this.getusernum()
    this.getshopnum()
    this.gettypenum()
  },
  methods: {
    getusernum() {
      this.$axios({
        method: 'get',
        url: '/manage/user/list',
      }).then((res) => {
        this.usernum = res.data.data.users.length
        this.rolnum = res.data.data.roles.length
      })
    },
    getshopnum() {
      this.$axios({
        method: 'get',
        url: '/manage/product/list',
        params: {
          pageNum: 1,
          pageSize: 10,
        },
      }).then((res) => {
        this.shopnum = res.data.data.total
      })
    },
    gettypenum() {
      this.$axios({
        method: 'get',
        url: '/manage/category/list',
        params: {
          parentId: 0,
        },
      }).then((res) => {
        this.typenum = res.data.data.length
      })
    },
  },
}
</script>

<style lang='less'>
#home {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  .homeindex {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    .top,
    .bottom {
      flex: 1;
      margin-bottom: 10px;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      .top-right {
        flex: 1;
        background-color: #fff;
        margin-left: 10px;
        border-radius: 4px;
      }
      .top-left {
        flex: 4;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        .top-left-top {
          flex: 1.2;
          background-color: #fff;
          margin-bottom: 10px;
          border-radius: 4px;
          background: url('/image/company_bg.d0846830.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: 50%;
        }
        .top-left-bottom {
          flex: 2;
          background-color: #fff;
          border-radius: 4px;
        }
      }
      .bottom-left,
      .bottom-mid {
        flex: 2;
        background-color: #fff;
        margin-right: 10px;
        border-radius: 4px;
      }
      .bottom-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        .bottom-right-top {
          flex: 1;
          margin-bottom: 10px;
          border-radius: 4px;
          background-color: #fff;
        }
        .bottom-right-bottom {
          flex: 1;
          border-radius: 4px;
          background-color: #fff;
        }
      }
    }
  }
}
</style>